<template>
  <view class="home">
    <!-- 顶部菜单栏 -->
    <view class="top-menu-wrap">
      <!-- 图片 -->
      <view class="top-menu-img">
        <image src="http://pic.yupoo.com/isfy666/19585231/ed0c440b.jpg" mode="widthFix"></image>
      </view>
      <view class="menu-wrap">
        <view class="menu-left">
          <view class="text">
            <text>
              用有心之心，做有心之事，得德。
            </text>
          </view>
          <view class="de-log">
            <image src="http://pic.yupoo.com/isfy666/e6a57523/eddd0859.png" mode="widthFix"></image>
          </view>
        </view>
        <view class="menu-rigth">
          <navigator class="menuu-item" url="/pages/brandStory/brandStory">
              <view class="">
              品牌故事
              </view>
              <view class="shot-line"></view>
          </navigator>
          <navigator class="menuu-item" url="/pages/works/works">
            <view class="">
              作品
            </view>
            <view class="shot-line"></view>
          </navigator>
          <navigator class="menuu-item" url="/pages/jointName/jointName">
            <view class="">
              联名
            </view>
            <view class="shot-line"></view>
          </navigator>
          <navigator class="menuu-item" open-type="switchTab" url="/pages/mall/mall">
            <view class="">
              商品
            </view>
            <view class="shot-line"></view>
          </navigator>
          <navigator class="menuu-item" url="/pages/videos/videos">
            <view class="">
              视频
            </view>
            <view class="shot-line"></view>
          </navigator>
          <navigator class="menuu-item">
            <view class="">
              合作
            </view>
            <view class="shot-line"></view>
          </navigator>
        </view>
      </view>
    </view>
    <!-- 动物图片 -->
    <view class="animal-img">
      <image src="http://pic.yupoo.com/isfy666/b1e20865/eb8e7a04.jpg" mode="widthFix"></image>
    </view>
    <!-- 中间log -->
    <view class="center-log">
      <image src="http://pic.yupoo.com/isfy666/063c7f0c/c11d8a46.png" mode="widthFix"></image>
    </view>
    <!-- 商品列表 -->
    <view class="goods-list">
      <navigator url="/pages/detail/detail" class="goods-item" v-for="(item,index) in goodsList" :key="index">
        <view class="goods-img">
            <image class="grid-middle" :src="item.img_url"></image>
        </view>
        <view class="goods-bottom-wrap">
          <view class="goods-description">
            㤫原创《五星出东方》麒麟夜光款精品定制手机壳包邮
          </view>
          <view class="price-wrap">
            <view class="price">
              ¥56.00
            </view>
            <view class="icon">
              <!-- <uni-icons type="cart-filled" size="20" color="#FF4B4B"></uni-icons> -->
            </view>
          </view>
        </view>
      </navigator>
    </view>
    <view class="bottom-box">
      <image src="/static/home/bottom_log.png">
    </view>
  </view>
</template>
<script>
export default {
  data() {
    return {
      goodsList:[
        {
          img_url:'http://pic.yupoo.com/isfy666/a170f298/75df2a1e.jpg'
        },
        {
          img_url:'http://pic.yupoo.com/isfy666/eb1d0413/3083ea4a.jpg'
        },
        {
          img_url:'http://pic.yupoo.com/isfy666/2dc3c359/04d0b388.jpg'
        },
        {
          img_url:'http://pic.yupoo.com/isfy666/e6ef878f/e88c71ae.jpg'
        },
      ],
    };
  },
  methods:{
  }
};
</script>
<style lang="scss" scoped>
.bottom-box{
  height: 160rpx;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  image{
    width: 40rpx;
    height: 79rpx;
  }
}
.center-log{
  width: 172rpx;
  height: 96rpx;
  margin: 0 auto;
  margin-top: 40rpx;
  margin-bottom: 16rpx;
  image{
    width: 100%;
  }
}
.top-menu-wrap{
  width: 750rpx;
  padding: 20rpx;
  background-image: url('http://pic.yupoo.com/isfy666/6f274cbc/a1d8ee9c.jpg');
  background-repeat: no-repeat;
  background-size: cover;
  border-bottom-left-radius: 10rpx;
  border-bottom-right-radius: 10rpx;
  .top-menu-img{
    width: 710rpx;
    height: 421rpx;
    overflow: hidden;
    border: 10rpx solid #ff7362;
    image{
      width: 100%;
    }
  }
  .menu-wrap{
    width: 710rpx;
    margin-top: 20rpx;
    display: flex;
    flex-flow: row nowrap;
    .menu-left{
      width: 263rpx;
      padding-top: 5rpx;
      display: flex;
      flex-flow: row nowrap;
      .text{
        text{
          writing-mode: vertical-lr;
          color: #eff;
          font-size: 14px;
          letter-spacing: 5rpx;
        }
      }
      .de-log{
        width: 72rpx;
        margin-left: 20rpx;
        image{
          width: 100%;
        }
      }
    }
    .menu-rigth{
      width: 447rpx;
      padding-top: 16rpx;
      display: flex;
      flex-flow: row wrap;
      .menuu-item{
        width: 186rpx;
        height: 142rpx;
        margin-top: 74rpx;
        border: 4rpx solid transparent;
        padding:10rpx;
        color: white;
        .shot-line{
          width: 40rpx;
          height: 4rpx;
          border-radius: 2rpx;
          background: #fff;
          margin-top: 14rpx;
        }
      }
      & > .menuu-item:nth-child(2n-1){
        margin-right: auto;
      }
    }
  }
}
.home{
  background-image:url('http://pic.yupoo.com/isfy666/9e17ec4f/6b309d5f.jpg');
  background-size: cover;
}

.animal-img{
  width: 100%;
  height: 358rpx;
  margin-top: 20rpx;
  overflow: hidden;
  border-radius: 10rpx;
  image{
    width: 100%;
  }
}
.goods-list{
  width: 710rpx;
  margin: 0 20rpx;
  overflow: hidden;
  & > .goods-item:nth-child(2n-1){
    margin-right: 20rpx;
  }
  .goods-item{
    float: left;
    width: 345rpx;
    margin-top: 20rpx;
    height: 470rpx;
    border-radius: 10rpx;
    background: #fff;
    overflow: hidden;
    display: flex;
    flex-flow: column nowrap;
    .goods-img{
      width: 100%;
      height: 342rpx;
      overflow: hidden;
      image{
        width: 100%;
        height: 100%;
      }
    }
    .goods-bottom-wrap{
      height: 128rpx;
      padding: 15rpx;
      .goods-description{
        min-height: 66rpx;
        font-size: 12px;
        line-height: 1.3;
        overflow: hidden;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
      }
      .price-wrap{
        height: 32rpx;
        display: flex;
        flex-flow: row nowrap;
        justify-content: space-between;
        align-items: center;
        font-size: 14px;
        color: #FF4B4B;
      }

    }
  }
}
</style>